<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>global</title>
</head>
<body>
    <div id="app">
        <h2>{{num}}</h2>
        <abc :num="num" @inc="increment" @dec="decrement"></abc>
    </div>

    <div id="ppa">
        <h2>{{num}}</h2>
        <abc @inc="jia" @dec="jian"></abc>
    </div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("abc",{
        // 直接使用props接收到的属性来渲染页面
        template:`
            <div>
                <button @click="plus">加</button>
                <button @click="reduce">减</button>
            </div>
        `,
        methods:{
            plus(){
                this.$emit("inc");
            },
            reduce(){
                this.$emit("dec")
            }
        }
    })

    var app = new Vue({
        el:"#app",
        data:{
            num:5
        },
        methods:{
            increment(){
                this.num++
            },
            decrement(){
                this.num--;
            }
        }
    })



    var ppa = new Vue({
        el:"#ppa",
        data:{
            num:5
        },
        methods:{
            jia(){
                this.num++
            },
            jian(){
                this.num--;
            }
        }
    })
</script>
</body>
</html>